<template>
  <chart :options="opts" :width="width" :height="height"></chart>
</template>

<script>
export default {
  name: 'Radar',

  props: ['width', 'height', 'options', 'seriesData', 'name'],

  computed: {
    opts () {
      let defaultOptions = {
        // tooltip: {
        //   trigger: 'item',
        //   formatter: '{a} <br/>{b} : {c} ({d}%)'
        // },
        radar: {
          indicator: [],
          shape: 'circle',
          splitNumber: 5,
          name: {
            textStyle: {
              color: 'rgb(238, 197, 102)'
            }
          },
          splitLine: {
            lineStyle: {
              color: [
                'rgba(238, 197, 102, 0.1)', 'rgba(238, 197, 102, 0.2)',
                'rgba(238, 197, 102, 0.4)', 'rgba(238, 197, 102, 0.6)',
                'rgba(238, 197, 102, 0.8)', 'rgba(238, 197, 102, 1)'
              ].reverse()
            }
          },
          splitArea: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(238, 197, 102, 0.5)'
            }
          }
        },
        series: [{
          name: '',
          type: 'radar',
          lineStyle: {
            normal: {
              width: 1,
              opacity: 0.5
            }
          },
          symbol: 'none',
          itemStyle: {
            normal: {
              color: '#F9713C'
            }
          },
          areaStyle: {
            normal: {
              opacity: 0.1
            }
          },
          data: []
        }]
      }

      return _.merge({}, defaultOptions, this.options)
    }
  }
}
</script>

<style lang="css">
</style>
